<template>
	<view>
		<!-- 页面标题 start -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">中介机构详情</block>
		</cu-custom>
		<!-- 页面标题 end -->
		<!-- 封面 start -->
		<image :src="coverUrl" class="cover"></image>
		<!-- 封面 end -->
		<!-- 基本信息 start -->
		<view class="info-con">
			<view class="info-item">
				<view class="value">{{info.companyname}}</view>
			</view>
			<view class="info-item row-warpper">
				<view class="value">{{info.legal}}</view>
				<view class="value">{{info.tel}}</view>
			</view>
			<view class="info-item">
				<view class="value">{{info.address}}</view>
			</view>
		</view>
		<!-- 基本信息 end -->
		<!-- 详细信息 start -->
		<view class="detail-con">
			<UTabs v-model="activeTab" :tabList="tabList"></UTabs>
			<!-- 机构介绍 start -->
			<view class="tab-con" v-show="activeTab===0">
				<view v-html="info.orgcontent"></view>
			</view>
			<!-- 机构介绍 end -->
			<!-- 服务承诺 start -->
			<view class="tab-con" v-show="activeTab===1">
				<view v-html="info.fwcn"></view>
			</view>
			<!-- 服务承诺 end -->
			<!-- 资质公示 start -->
			<view class="tab-con" v-show="activeTab===2">
				<uni-list>
					<uni-list-item v-for="(item,index) in zzgsList" :key="index">
						<template v-slot:header>
							<image class="cover-zz" :src="item.picsrc"></image>
						</template>
						<template v-slot:body>
							<view class="col-warpper certification-con">
								<scroll-view scroll-x="true" class="message-con">
									<view class="item">
										证书名称:{{item.title}}
									</view>
									<view class="item">
										资质等级：{{item.zzdj}}
									</view>
									<view class="item">
										发证时间：{{item.fzsj}}
									</view>
									<view class="item">
										资质介绍:{{item.body}}
									</view>
								</scroll-view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<!-- 资质公示 end -->
			<!-- 中选项目 start -->
			<view class="tab-con" v-show="activeTab===3">
				<uni-list>
					<scroll-view @scrolltolower="scrolltolower" :refresher-enabled="true" :scroll-y="true"
						class="list-con">
						<uni-list-item v-for="(item,index) in zxProjectList" :key="index">
							<template v-slot:body>
								<view class="col-warpper detail">
									<view class="row-warpper title-con">
										<view class="qybm">【{{QYBM[item.qybm]}}】</view>
										<view class="title">{{item.title}}</view>
									</view>
									<view>业务类型：{{item.cat}}</view>
									<view>中选时间：{{item.create_time}}</view>
								</view>
							</template>
						</uni-list-item>
					</scroll-view>
				</uni-list>
			</view>
			<!-- 中选项目 end -->
			<!-- 执业人员 start -->
			<view class="tab-con" v-show="activeTab===4">
				<uni-list>
					<scroll-view :refresher-enabled="true" :scroll-y="true" class="list-con">
						<uni-table border stripe emptyText="暂无更多数据">
							<!-- 表头行 -->
							<uni-tr>
								<uni-th align="center">持证人</uni-th>
								<uni-th align="center">资质证书名称</uni-th>
								<uni-th align="left">资质证书等级</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in zyryList" :key="index">
								<uni-td align="center">{{item.name}}</uni-td>
								<uni-td align="center">{{item.certificatename}}</uni-td>
								<uni-td align="left">{{item.certificatelevel}}</uni-td>
							</uni-tr>
						</uni-table>

						<!-- <uni-list-item v-for="(item,index) in zyryList" :key="index" :time="item.certificatedate">
							<template v-slot:body>
								<view class="col-warpper zyry-con">
									<view class="name">{{item.name}}</view>
									<view class="certifi">{{item.certificatename}}</view>
								</view>
							</template>
						</uni-list-item> -->
					</scroll-view>
				</uni-list>
			</view>
			<!-- 执业人员 end -->
		</view>
		<!-- 详细信息 end -->
	</view>
</template>

<script>
	import companyMixins from "@/common/request/company.js"
	import zzgsRequest from "@/common/request/zzgsRequest.js"
	import zxggMixins from "@/common/request/zxggMixins.js"
	export default {
		mixins: [companyMixins, zzgsRequest, zxggMixins],
		created() {
			this.initData()
		},
		computed: {
			/**
			 * 封面地址
			 */
			coverUrl() {
				let picUrl = ""
				if (this.info.picsrc === null || this.info.picsrc === "" || this.info.picsrc === undefined) {
					picUrl = require("@/static/pic/companypic.jpg")
				} else {
					if (this.info.picsrc.indexOf("/images") !== -1) {
						picUrl = this.info.picsrc
					} else {
						picUrl = "http://222.134.12.11:8094/sys/common/static/" + this.info.picsrc
					}
				}
				return picUrl
			}
		},
		data() {
			return {
				info: {},
				activeTab: 0,
				tabList: ["机构介绍", "服务承诺", "资质公示", "中选项目", "执业人员"],
				zzgsList: [],
				zxProjectList: [],
				zxProjectPage: {
					pageNo: 1,
					pageSize: 10
				},
				// --- 执业人员 ---
				zyryList: [],
				zyryPage: {
					pageNo: 1
				}
			}
		},
		methods: {
			/**
			 * 获取数据
			 */
			initData() {
				const pd = {
					id: this.$route.query.id
				}
				this.CompanyDetail(pd, data => {
					this.info = data
				})
				// --- 资质公示 ---
				const params = {
					memberid: this.$route.query.id
				}
				this.getZzgs(params, data => {
					this.zzgsList = data
				})
				// --- 中选项目 ---
				const zxParams = {
					zxjg: this.info.companyname,
					pageSize: 10,
					pageNo: this.zxProjectPage.pageNo
				}
				this.getNews(zxParams, data => {
					this.zxProjectList = data
				})
				// --- 执业人员 ---
				const zyryParams = {
					companyid: this.$route.query.id,
					pageNo: 1,
					pageSize: 10
				}
				this.getZyry(zyryParams, data => {
					this.zyryList = data
				})
			},
			/**
			 * 中选公告翻页
			 */
			scrolltolower() {
				this.zxProjectPage.pageNo += 1
				const zxParams = {
					zxjg: this.info.companyname,
					pageSize: 10,
					pageNo: this.zxProjectPage.pageNo
				}
				this.getNews(zxParams, data => {
					this.zxProjectList = this.zxProjectList.concat(data)
				})
			}
		}
	}
</script>

<style lang="less">
	.cover {
		width: 100%;
	}

	//  --- 基本信息 ---
	.info-con {
		padding: 15px;
		background-color: #ffffff;

		.info-item {
			align-self: stretch;

			.label {
				font-size: 16px;
				font-weight: 700;
				margin-right: 5px;
			}

			.value {
				padding: 5px 0;
				margin: 0 5px;
			}
		}
	}

	// --- 资质证书 ---
	.certification-con {
		align-items: stretch;

		.message-con {
			width: 65vw;
		}

		.item {
			white-space: nowrap;

		}
	}

	.orgcontent {
		padding: 0 15px;
	}

	.rate {
		margin-bottom: 5px;
	}

	// --- 下方详细信息 ---	
	.detail-con {
		margin-top: 15px;

		.tab-con {
			background-color: #FFFFFF;
			padding: 5px 15px;

			.cover-zz {
				height: 10vh;
				width: 20vw;
				margin: 0 5px;
			}

			.list-con {
				height: 50vh;
			}
		}

		.detail {
			align-items: stretch;

			.title-con {
				width: 100%;

				.qybm {
					white-space: nowrap;
				}

				.title {
					white-space: nowrap;
				}
			}
		}
	}

	// --- 执业人员 --- 
	.zyry-con {
		align-items: stretch;

		.name {
			font-size: 16px;
			font-weight: 700;
		}

		.certifi {
			font-size: 12px;
		}
	}
</style>
